@MainColor: #666;
@BackColor: #aaa;
@White: #fefefe;
@ActiveColor: #f07600;
@BackHoverColor: #fcf0e5;
@Width: 80em;

.list
{
    margin: 0 auto;
    width: @Width;
    padding: 10px 50px;
    color: @MainColor;
    text-align: left;
    font-family: Microsoft YaHei;
    background-color: @White;
    box-shadow: 0 0 2px 2px #888888;
    
    table
    {
        position: relative;
        // 设置表格cell的间隙
        border-collapse: collapse;
        line-height: 4em;
        table-layout: fixed;
    }

    button
    {
        .btn-normal();
        &:hover
        {
            .btn-active();
        }
    }
    
    tr
    {
        border-bottom: solid 1px @BackColor;

        td, th
        {
            font-weight: normal;
            text-indent: 1em;
        }

        @Width_Checkbox:3em;
        @Width_Time: 15em;
        @Width_State: 5em;
        @Width_Option: 18em;

        td:nth-child(1)
        {
            width: @Width_Checkbox;
        }
        td:nth-child(3)
        {
            width: @Width_Time;
        }
        td:nth-child(4)
        {
            width: @Width_State;
        }
        td:nth-child(5)
        {
            width: @Width_Option;
        }

        td:nth-child(2)
        {
            width: @Width - @Width_Checkbox - @Width_Time - @Width_State - @Width_Option;
        }

        button
        {
            padding: 0.2em 1em;
            margin-right: 1em;
        }
    }

    tbody
    {        
        tr
        {
            transition: background-color .5s;

            &:hover
            {
                background-color: @BackHoverColor;
            }
        }
    }

    thead tr
    {
        border: none;
        background-color: transparent;
    }

    .btn-normal
    {
        font-size: 1em;
        line-height: 1em;
        border: solid 1px @BackColor;
        border-radius: 2px;
        background-color: @White;
        color: @MainColor;
        cursor: default;
        transition: color .2s, background-color .5s, border-color .5s;
    }

    .btn-active
    {
        background-color: @ActiveColor;
        color: @White;
        border-color: @ActiveColor;
        cursor: pointer;

        &[disabled]
        {
            .btn-normal();
            color: #ccc;
        }
    }   

    .btn-new
    {
        position: absolute;
        right: 1em;
        top: 1.2em;
        padding: 0.3em 1em;

        &:hover
        {
            cursor: pointer;
        }
    }

    .btn-delete-all
    {
        margin-left: 1em;
    }

    .check-all
    {
        margin-left: 2em;
    }
}